<template>
    <uni-popup ref="pop" type="bottom" :is-mask-click='false' :safe-area='false'>
        <view class="box c-flex_column" @click="tapPlay">
            <view class="header c-flex_row c-align_center">
                <view class="title-box c-flex_row c-align_center c-flex_1">
                    <uni-icons custom-prefix="iconfont" type="icon-e-bg-volume" color="#1890ff" size="18"></uni-icons>
                    <view class="title c-flex_1">
                        {{word.englishWord}}
                    </view>
                </view>
                <view class="button-box c-flex_row c-align_center c-justify_end" @click.stop="tapMask">
                    <uni-icons type="clear" color="#ff2525" size="20"></uni-icons>
                </view>
            </view>
            <view class="content c-flex_column">
                <view class="row english">
                    <view class="data">
                        {{word.englishTranslation}}
                    </view>
                </view>
                <view class="row chinese">
                    <view class="data">
                        {{word.chineseTranslation}}
                    </view>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script>
    import {
        getWordPlayVoicePath
    } from '../../../services/index.js';
    export default {
        data: function() {
            return {
                showPop: false,
                word: null,
                audioContext: null
            }
        },
        watch: {
            showPop: function(n, o) {
                if (n == o) return;
                this.$emit("show", n);
                if (n) {
                    this.open();
                } else {
                    this.close();
                }
            },
        },
        methods: {
            show(show, word) {
                this.showPop = show;
                if (show) {
                    if (!word) {
                        throw new Error("show wordPop must have word data");
                    } else {
                        if (!this.word || word.id != this.word.id) {
                            this.word = word;
                            this.$nextTick(() => {
                                this.playVoice(this.word.englishWord);
                            })
                        }
                    }
                }
            },
            open() {
                this.$refs.pop.open();
            },
            close() {
                this.$refs.pop.close();
            },
            tapMask() {
                this.show(false, null);
            },
            playVoice(word) {
                getWordPlayVoicePath(word).then(res => {
                    this.$emit("playWord", res)
                }).catch(() => {
                    uni.showToast({
                        title: `播放失败`,
                        icon: 'none'
                    })
                })
            },
            tapPlay() {
                this.playVoice(this.word.englishWord);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        background: #fff;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;

        .header {
            padding: 0 50rpx;
            padding-bottom: 0;
            height: 100rpx;
            border-bottom: 1rpx solid #88888844;

            .title-box {
                font-size: 40rpx;
                font-weight: 700;
                color: #333;

                .title {
                    margin-left: 15rpx;
                }
            }

            .button-box {
                width: 100rpx;
                height: 100%
            }
        }

        .content {
            padding: 50rpx 30rpx 80rpx;

            .row {
                padding: 20rpx;
                margin-bottom: 40rpx;
                border-radius: 10rpx;
                box-shadow: 0 0 20rpx #88888844;
            }

            .row:last-child {
                margin-bottom: 0;
            }

            .data {
                font-size: 34rpx;
                color: #333;
            }

            .english {
                .data {}

                .data::before {
                    content: "explain: ";
                    font-size: 22rpx;
                    color: #1890ff;
                }
            }

            .chinese {
                .data {}

                .data::before {
                    content: "中文释义: ";
                    font-size: 22rpx;
                    color: #1890ff;
                }
            }
        }
    }
</style>